<template>
  <div class="docker">
    <div
      v-for="(item, index) in dockerList"
      :class="{'docker__item': true, 'docker__item--active': index === 0}"
      :key="item.icon"
    >
      <router-link :to="item.to">
        <div class="docker__item__img iconfont" v-html="item.icon" />
        <div class="docker__item__text">{{item.text}}</div>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Docker',
  setup () {
    const dockerList = [
      {
        icon: '&#xe89c;',
        text: '首页',
        to: { name: 'Home' }
      },
      {
        icon: '&#xe604;',
        text: '购物车',
        to: { name: 'CartList' }
      },
      {
        icon: '&#xe61e;',
        text: '订单',
        to: { name: 'Home' }
      },
      {
        icon: '&#xe660;',
        text: '我的',
        to: { name: 'Home' }
      }
    ]
    return { dockerList }
  }
}
</script>

<style lang="scss" scope>
@import '../../style/viriables.scss';
.docker {
  position: absolute;
  left: 0;
  bottom: 0;
  box-sizing: border-box;

  display: flex;

  width: 100%;
  padding: 0 0.18rem;
  border-top: 0.01rem solid $content-bgColor;

  &__item {
    flex: 1;
    text-align: center;
    a {
      color: $content-fontcolor;
      text-decoration: none;
    }
    .iconfont {
      margin: 0.07rem 0 0.02rem 0;

      font-size: 0.18rem;
    }
    &__text {
      // TODO:难点记录 实现10px像素的文字
      font-size: 0.2rem;
      transform: scale(0.5, 0.5);
      transform-origin: center top;
    }
    &--active {
      a {
        color: #1fa4fc;
      }
    }
  }
}
</style>
